@extends('mobile.layout1')
@section('title','登录')
@section('body')
    <body id="login" ontouchstart="">
    <header class="ui-header ui-header-stable af-header">
        <ul class="ui-row-flex">
            <li class="ui-col ui-flex ui-flex-pack-start">
            </li>
            <li class="ui-col ui-flex ui-flex-pack-center">
                <h1>登录</h1>
            </li>
            <li class="ui-col ui-flex ui-flex-pack-end">
                <a data-href="/"><i class="ui-icon-home"></i></a>
            </li>
        </ul>
    </header>
    @endsection
    @section('content')
        <section class="ui-form-login">

                {{--<div class="ui-form-item ui-form-item-r ui-border">--}}

                    {{--<a href="#" class="ui-icon-close"></a>--}}
                    {{--<button type="button" class="ck-code-img af-border-l"><img src="{{captcha_src('mini')}}" alt="" id="chkCode" onclick="this.src='{{url('/captcha')}}/'+Math.random();"></button>--}}
                {{--</div>--}}

                <div class="ui-form-item ui-form-item-r ui-border">
                    <input id="phone" type="text" name="phone" data-reg="^1[3|4|5|7|8]\d{9}$" placeholder="请输入手机号码" required data-reg-msg="请输入正确的手机号码">
                    <button type="button" class="J-countDown ui-border-l" data-time="60" onclick="sendMobile(this)"  style="color: #f60;">
                        获取验证码
                    </button>
                    {{--<a href="#" class="ui-icon-close"></a>--}}
                </div>

                <div class="ui-form-item ui-form-item-pure ui-border">

                    <input type="text" name="mesCode" class="form-control" id="mescode" placeholder="请输入短信验证码" required>

                    {{--<a href="#" class="ui-icon-close"></a>--}}
                </div>
                {{--
                            <div class="ui-form-item ui-form-item-pure ui-form-item-switch ui-border">
                                <input type="password" name="password" data-reg="^[\S]{6,20}$" placeholder="请设置6-20位登录密码" required>
                                <a href="#" class="ui-icon-close"></a>
                                <label class="ui-switch ui-switch-primary">
                                    <input type="checkbox">
                                </label>
                            </div>--}}


                <button class="ui-btn-lg ui-btn-primary btn btn-block btn-yellow" type="button" onclick="bindMobile()
">登录</button>




        </section>


    @endsection
    @section('js')
        <script>
            var countdown=60;
            function settime(obj){
                if (countdown == 0) {
                    obj.attr("disabled",false);
                    obj.text("获取验证码");
                    countdown = 60;
                } else {
                    obj.attr("disabled", true);
                    obj.text("重新发送(" + countdown + ")");
                    countdown--;
                    setTimeout(function() {
                        settime(obj)
                    },1000)
                }

            }
            function sendMobile(n){
                var chkCode=$("#picCode").val();
                var phone=$("#phone").val();
                var disable=false;
                if($("#picCode").val()==''){
                    layer.open({
                        content: '验证码不能为空',
                        time: 2
                        ,skin: 'msg'
                    });
                    return ;
                }
                if($("#phone").val()==''){
                    layer.open({
                        content: '请输入手机号',
                        time: 2
                        ,skin: 'msg'
                    });
                    return ;
                }
                if(disable==true){
                    return ;
                }
                var index= layer.open({
                    type: 2
                    ,content: '提交中'
                });
                disable=true;

                $.post('/user/sms',{chkCode:chkCode,phone:phone},function(data){
                    var obj = $(n);
                    settime(obj);
                    if(data.code==0){
                        layer.open({
                            content: data.message,
                            time: 2
                            ,skin: 'msg'
                        });
                        disable=false;
                        layer.close(index);
                        return ;
                    }else{
                        layer.open({
                            content: '发送成功',
                            time: 2
                            ,skin: 'msg'
                        });
                        layer.closeAll();

                    }
                });
            }
            function bindMobile(){
                var phone=$("#phone").val();
                var mescode=$("#mescode").val();

                var index=  layer.open({
                    type: 2
                    ,content: '提交中'
                });
                $.post('/login',{phone:phone,mescode:mescode},function(data){
                    if(data.code==0){
                        layer.open({
                            content: data.message,
                            time: 2
                            ,skin: 'msg'
                        });

                        layer.close(index);
                    }else if(data.code==1){

                        layer.open({
                                content: data.message,
                                time:2,
                                skin:'msg'
                            }
                        );
                        layer.close(index);
                        window.location.href='/myTeam';
                    }
                });
            }
        </script>
    @endsection
    </body>
    </html>